<template>
  <div class="app-container">
    <!-- <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div> -->

    <el-card shadow="never">
      <el-form-item>
        <!-- <el-button v-if="permissions.create" type="primary" size="default" @click="Create">+新增</el-button> -->
        <!-- <el-button type="primary" size="default" @click="TransferManager">解绑</el-button> -->
      </el-form-item>
      <el-table v-loading="loading" :data="tableList" highlight-current-row border @select="handleCurrentChange">
        <el-table-column type="selection" align="center" width="50" />
        <el-table-column key="name" label="姓名" min-width="90px" align="center" prop="name" />
        <el-table-column key="corpName" label="所属企业" min-width="120px" align="center" prop="corpName" />
        <el-table-column label="人员状态" prop="statusName" min-width="80" />
        <el-table-column key="sex" label="性别" min-width="80px" align="center" prop="sex" />
        <el-table-column key="cardNumber" label="身份证号" min-width="120px" align="center" prop="cardNumber" />
        <el-table-column key="mobile" label="联系电话" min-width="90px" align="center" prop="mobile" />
        <el-table-column
          key="postCategoryName"
          label="岗位类别"
          min-width="90px"
          align="center"
          prop="postCategoryName"
        />
        <el-table-column key="address" label="家庭住址" min-width="90px" align="center" prop="address" />
        <el-table-column key="startDate" label="进场日期" min-width="90px" align="center" prop="startDate" />
        <el-table-column key="endDate" label="离场日期" min-width="90px" align="center" prop="endDate" />
        <!-- <el-table-column label="操作" fixed="right" max-width="260" min-width="160">
          <template #default="scope">
            <el-button v-if="permissions.update" link size="small" type="primary" @click="Edit(scope.row)">
              修改
            </el-button>
            <el-button
              v-if="permissions.unbind && scope.row.postCategory === 1100"
              link
              size="small"
              type="primary"
              @click="Unbind(scope.row)"
            >
              解绑
            </el-button>
            <el-button v-if="permissions.detail" type="primary" link size="small" @click="Detail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <add-form
      v-if="dialogAddOrEdit.visible"
      :dialog-add-or-edit="dialogAddOrEdit"
      :is-manager="true"
      :role="10"
      @send-close="sendClose"
    />
  </div>
</template>

<script lang="ts" setup>
/**引入文件**/
import { computed } from "vue";
import { useScreen } from "@/store/modules/screen";
import { getDicts } from "@/store/modules/dict";
import addForm from "@/views/commonpage/worker/workerinfo/addForm.vue";
import moment from "moment";

import { QueryWorkerManagerList, UnbindPerson } from "@/api/worker/index";
import { Tree } from "@/api/worker/types";
import { downloadFile } from "@/utils";

const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
});
const { id } = toRefs(props);

/**声明变量**/
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenHeight = ref(100);

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<any[]>();
const queryParams = reactive<any>({
  pageIndex: 1,
  pageSize: 20,
});
const userType = localStorage.getItem("usertypeName");
const download_loading = ref(false);

/**权限处理 */
const currentSystem = ref(localStorage.getItem("usertypeName"));
const isLumpContractor = ref(localStorage.getItem("isLumpContractor")); //是否是总包
const permissions = ref({
  create: false,
  update: false,
  detail: false,
  unbind: false,
  transferManager: false,
});
if (currentSystem.value == "SysUser") {
  permissions.value = {
    create: false,
    update: false,
    detail: true,
    unbind: false,
    transferManager: false,
  };
}
if (currentSystem.value == "Manager") {
  permissions.value = {
    create: true,
    update: true,
    detail: true,
    unbind: false,
    transferManager: false,
  };
}
if (currentSystem.value == "Corp") {
  if (isLumpContractor.value) {
    permissions.value = {
      create: true,
      update: true,
      detail: true,
      unbind: true,
      transferManager: true,
    };
  } else {
    permissions.value = {
      create: true,
      update: true,
      detail: true,
      unbind: false,
      transferManager: false,
    };
  }
}

if (currentSystem.value == "Constructor" || currentSystem.value == "Commander") {
  permissions.value = {
    create: false,
    update: false,
    detail: true,
    unbind: false,
    transferManager: false,
  };
}
const dialogAddOrEdit = reactive<DialogOption>({
  visible: false,
});

const selectedRows = ref([] as any[]);
//实现复选框的单选
const handleCurrentChange = (selections: any, row: any) => {
  selectedRows.value = selections;
};

/**声明函数**/
// 初始化窗体
function initScreen() {
  if (mobile.value === "mobile") {
    screenHeight.value = screenStore.screenHeight;
  } else {
  }
}

//新增
const Create = () => {
  dialogAddOrEdit.visible = true;
  dialogAddOrEdit.footBtn = "确认新增";
  dialogAddOrEdit.title = "新增";
  dialogAddOrEdit.type = 1;
};

//编辑
const Edit = (row: any) => {
  dialogAddOrEdit.visible = true;
  dialogAddOrEdit.id = row.id;
  dialogAddOrEdit.footBtn = "确认修改";
  dialogAddOrEdit.title = "修改";
  dialogAddOrEdit.type = 2;
};
//详情
const Detail = (row: any) => {
  dialogAddOrEdit.visible = true;
  dialogAddOrEdit.id = row.id;
  dialogAddOrEdit.title = "详情";
  dialogAddOrEdit.type = 3;
};

function Unbind(row: any) {
  ElMessageBox.confirm("确定解绑" + row.name + "所在项目" + row.projectName + "吗？", "提示", {
    cancelButtonText: "取消",
    confirmButtonText: "确定",

    type: "warning",
  })
    .then(() => {
      UnbindPerson(row.id).then((res) => {
        if (res.type === 0) {
          if (res.success) {
            ElMessage({
              type: "success",
              message: res.msg,
            });
            handleQuery();
          } else {
            ElMessage({
              type: "error",
              message: res.msg,
            });
          }
        }
      });
    })
    .catch(() => {
      console.log("取消");
    });
}

/* 列表查询 */
async function handleQuery() {
  loading.value = true;
  queryParams.projectId = id.value;
  let list = await QueryWorkerManagerList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      total.value = list.data.total;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}

const sendClose = (needRefresh: boolean, workerInfo?: any) => {
  dialogAddOrEdit.visible = false;
  dialogAddOrEdit.id = undefined;
  // dialogDetail.visible = false;
  // dialogDetail.id = undefined;
  if (needRefresh) {
    handleQuery();
  }
};

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

//生命周期事件

onMounted(async () => {
  initScreen();
  handleQuery();
});

function download() {
  download_loading.value = true;
}
</script>
<style lang="less" scoped></style>
